import React, {Component} from "react";
import {inject, observer} from "mobx-react";
import {Button, Descriptions, Icon, Modal, Table} from "antd";
import Text from "antd/es/typography/Text";
import Title from "antd/es/typography/Title";
import Search from "antd/es/input/Search";
import './style.css'


const users = [
    {
        id: '1',
        username: 'moyrn',
        // password: 'fjiosjfeiosjfiojeoiq',
        authorization: 0,
        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
        nickname: 'moyrn',
        phone: '13875902222',
        status: 1
    },
    {
        id: '2',
        username: 'moyrn',
        // password: 'fjiosjfeiosjfiojeoiq',
        authorization: 0,
        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
        nickname: 'moyrn',
        phone: '13875902222',
        status: 1
    }
];

const data = [
    {
        id: 1,
        machine_id: 1,
        machine: {
            ip: '139.199.75.187'
        },
        nsq_config_id: 1,
        nsq_config: {
            topic: 'moyrn'
        },
        status: 1,
    },
];

const nsqConfig = {
    id: 1,
    ip: '139.199.75.187',
    channel: 'channel',
    topic: 'topic',
};

export default @inject('store') @observer
class AuthManager extends Component {
    columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '机器ID',
            dataIndex: 'machine_id',
            key: 'machine_id',
        },
        {
            title: '机器IP',
            dataIndex: 'machine.ip',
            key: 'machine_ip',
        },
        {
            title: 'NSQ配置ID',
            dataIndex: 'nsq_config_id',
            key: 'nsq_config_id',
            render: (text, record) => (
                <div>
                    <Text>{text}</Text>
                    <Button className='detail-button' size={"small"}
                            onClick={() => this.getNsqConfigDetail(text, record)}>详情</Button>
                </div>)
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: '操作',
            render: (item) => (
                <div>
                    <Button type={"primary"} onClick={() => this.getWorkerAuth(item)}>授权</Button>
                </div>
            )
        },
    ];

    authColumns = [
        {
            title: '用户ID',
            dataIndex: 'user_id',
            key: 'user_id',
        },
        {
            title: '权限',
            dataIndex: 'authorization',
            key: 'authorization',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: '操作',
            render: (item) => {
                switch (item.status) {
                    case 1:
                        return <div>
                            <Button className='ctrl-button' size={"small"} type={"danger"}>禁用</Button>
                            <Button className='ctrl-button' size={"small"} type={"danger"}>取消授权</Button>
                        </div>;
                    case 2:
                        return <div>
                            <Button className='ctrl-button' size={"small"} type={"primary"}>启用</Button>
                            <Button className='ctrl-button' size={"small"} type={"danger"}>取消授权</Button>
                        </div>;
                    default:
                }

            }
        },
    ];

    userColumns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'username'
        },
        {
            title: '权限等级',
            dataIndex: 'authorization',
            key: 'authorization',
            render: (text) => (text === 0xff ? '管理员' : '用户')
        },
        {
            title: '头像',
            dataIndex: 'avatar',
            key: 'avatar',
            render: (item) => (<img draggable={false} width={24} height={24} src={item} alt={'list-avatar'}/>)
        },
        {
            title: '昵称',
            dataIndex: 'nickname',
            key: 'nickname'
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone'
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (text) => {
                switch (text) {
                    case 0:
                        return <Text type={"warning"}>未通过</Text>;
                    case 1:
                        return <Text>已通过</Text>;
                    case 2:
                        return <Text type={"danger"}>已禁用</Text>;
                    default:
                }
            }
        },
    ];

    constructor(props) {
        super(props);
        this.state = {
            data: data,
            nsqConfigDetailVisible: false,
            nsqConfig: null,
            authVisible: false,
            authorizations: null,
            selectedUser: null,

            worker: null,
        };
    }

    getNsqConfigDetail(nsqConfigID, record) {
        console.log(nsqConfigID);
        console.log(record);
        this.setState({nsqConfigDetailVisible: true, nsqConfig: nsqConfig})
    }

    getWorkerAuth(item) {
        this.setState({
            authVisible: true, authorizations: [
                {
                    user_id: 1,
                    authorization: 1,
                    status: 1
                },
            ]
        });
    }

    _addAuth() {
        // todo: fetch



        this.setState({addModalVisible:false});
    }

    _searchUsers(value) {
        this.setState({users: users});
    }

    render() {
        return (
            <div>
                <Table columns={this.columns} dataSource={this.state.data}/>
                <Modal visible={this.state.nsqConfigDetailVisible} footer={null} width={'85%'}
                       onCancel={() => this.setState({nsqConfigDetailVisible: false, nsqConfig: null})}>
                    {this.state.nsqConfig ?
                        <Descriptions title={'NSQ详情'} bordered>
                            <Descriptions.Item label={'ID'}>{this.state.nsqConfig.id}</Descriptions.Item>
                            <Descriptions.Item label={'IP'}>{this.state.nsqConfig.ip}</Descriptions.Item>
                            <Descriptions.Item label={'Channel'}>{this.state.nsqConfig.channel}</Descriptions.Item>
                            <Descriptions.Item label={'Topic'}>{this.state.nsqConfig.topic}</Descriptions.Item>
                        </Descriptions> : null
                    }
                </Modal>
                <Modal visible={this.state.authVisible} footer={null} width={'85%'}
                       onCancel={() => this.setState({authVisible: false})}>
                    {/*{console.log(this.state.worker)}*/}
                    <Button className='head-button' type={"primary"}
                            onClick={() => this.setState({addModalVisible: true})}>
                        <Icon type={'plus'}/>授权</Button>
                    <Table columns={this.authColumns} rowKey={record => record.user_id}
                           dataSource={this.state.authorizations}/>
                </Modal>

                <Modal width={'85%'} closable={false}
                       onOk={() => this._addAuth()}
                       onCancel={() => this.setState({
                           addModalVisible: false,
                           machines: []
                       })}
                       visible={this.state.addModalVisible}>
                    <Title level={4}>选择用户</Title>
                    <Search placeholder={'请输入用户名'} enterButton={'搜索'}
                            style={{marginBottom: 10}}
                            onSearch={value => (this._searchUsers(value))}/>
                    <Table columns={this.userColumns} rowKey={record => record.id} dataSource={this.state.users}
                           rowSelection={{
                               type: 'radio',
                               onChange: (key, value) => {
                                   this.setState({selectedUser:value[0]});
                                   console.log(value);
                               }
                           }}/>
                </Modal>
            </div>
        )
    }
}